$(function () {
    load();
    $('#title').on('keydown', function(e) {
        // 判断是否按下的是回车键
        if (e.keyCode === 13) {
            // 获取本地存储的数据
            var localData = getData();
            // 把新数据追加给localdata数组
            localData.push({ title: $('#title').val(), done: false });
            // 把localdata数组存储到localstorage
            saveData(localData);
            // 渲染加载数据
            load();
            $(this).val('');
        }

    })

    // 读取本地存储的数据
    function getData() {
        var data = localStorage.getItem('toDoList');
        if (data !== null) {
            // 本地存储的数据的格式是字符串格式，此处需要的是对象格式
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    // 更新数据到本地存储
    function saveData(data) {
        localStorage.setItem('toDoList', JSON.stringify(data));
    }

    // 渲染加载数据
    function load() {
        var data = getData();
        // 遍历之前清空ul和ol中元素的内容
        $('ul, ol').empty();
        $.each(data, (index, result) => {
            if(result.done === true) {
                $('ul').prepend('<li><input type="checkbox" class="checkBox" checked="checked"><p class="pList">' + result.title + '</p><button class="btnList" id=' + index + '>删除</button></li>');
            }else {
                $('ol').prepend('<li><input type="checkbox" class="checkBox"><p class="pList">' + result.title + '</p><button class="btnList" id=' + index + '>删除</button></li>');
            }
            
        });
    }

    // 点击删除
    $('ul, ol').on('click', 'button', function() {
        // 先获取本地数据
        var data = getData();
        // 修改数据
        var index = $(this).attr('id');
        data.splice(index, 1);
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load();
    })



    // 复选框选择渲染在ul还是ol
    $('ol, ul').on('click', 'input', function() {
        // 先获取本地数据
        var data = getData();
        // 修改数据
        var index = $(this).siblings('button').attr('id');
        data[index].done = $(this).prop('checked');
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load();
    }) 
})